<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            magin:0;
            padding:0;
        }

        #main{
            width: 400px;
            height: 600px;
            background-image: url("images/background_1.png");
            margin: 20px auto;
            position: relative;
            /*敌方小飞机不停在掉，超过main，不见*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="main">

    </div>
    <script>
        var mainObj = document.getElementById("main");
        //创建小飞机对象，放上去
        function smallPlane(src,x,y,speed){
            //小飞机是什么样的
            this.imgSrc = src;
            this.x = x;
            this.y = y;
            this.speed = speed;

            //小飞机本质上一定是一个HTML元素<标签><img>
            this.smallPlaneNode = document.createElement("img");
            this.init = function(){//定义
                this.smallPlaneNode.src = this.imgSrc;
                this.smallPlaneNode.style.position = "absolute";
                this.smallPlaneNode.style.left = this.x + "px";
                this.smallPlaneNode.style.top = this.y + "px";

                //把小飞机放上去
                mainObj.appendChild(this.smallPlaneNode);
            }

            this.init();//调用

            //小飞机能做什么：动
            this.move = function(){
                //小飞机对象本质上是一个HTML DOM元素，只需要改变小飞机的定位
                this.smallPlaneNode.style.top = parseInt(this.smallPlaneNode.style.top) + this.speed + "px";
            }

        }

        //var smallPlane = new smallPlane("images/enemy1_fly_1.png",100,470,10);

        //小飞机是有很多架——数组
        var smallPlaneArray = [];
        //定义一个方法，创建一个小飞机，放进数组
        function createSmallPlane(){
            var smallPlane = new smallPlane("images/enemy1_fly_1.png",100,470,10);//一架飞机
            smallPlaneArray.push(smallPlane);//创建出一架飞机之后，放进数组
        }
        //多次调用createSmallPlane，创建多个飞机，数组中就可以代表所有创建的小飞机
        //定时器：每隔一段时间，调用一次createSmallPlane，创建一架小飞机
        setInterval(createSmallPlane,1000);
        //setInterval("createSmallPlane()",1000);

        //玩家飞机创建
        function playerPlane(src,x,y,speed){
            //玩家是什么样的
            this.imgSrc = src;
            this.x = x;
            this.y = y;
            this.speed = speed;

            //玩家飞机本质上一定是一个HTML元素<标签><img>
            this.playerPlaneNode = document.createElement("img");
            this.init = function(){//定义
                this.playerPlaneNode.src = this.imgSrc;
                this.playerPlaneNode.style.position = "absolute";
                this.playerPlaneNode.style.left = this.x + "px";
                this.playerPlaneNode.style.top = this.y + "px";

                //把小飞机放上去
                mainObj.appendChild(this.playerPlaneNode);
            }

            this.init();//调用

            //玩家飞机能做什么：动
            this.moveLeft = function(){
                alert("moveLeft");
            }
            this.moveRight = function(){}
            this.moveUp = function(){}
            this.moveDown = function(){}
            //发送子弹
            this.shoot = function(){}
        }

        //playerPlane：创建了一个Img节点，同时把这个节点放置在main这个div上面
        var player =new playerPlane("images/myplane.gif",50,500,10);
    </script>
</body>
</html>